<template><div><h1 id="vue" tabindex="-1"><a class="header-anchor" href="#vue" aria-hidden="true">#</a> VUE</h1>
<h2 id="mvvm" tabindex="-1"><a class="header-anchor" href="#mvvm" aria-hidden="true">#</a> MVVM</h2>
<p><code v-pre>MVVM</code>，是<code v-pre>Model-View-ViewModel</code>的简写，是<code v-pre>M-V-VM</code>三部分组成。它本质上就是<code v-pre>MVC </code>的改进版。<code v-pre>MVVM</code> 就是将其中的<code v-pre>View </code>的状态和行为抽象化，其中<code v-pre>ViewModel</code>将视图 <code v-pre>UI</code> 和业务逻辑分开，它可以取出 <code v-pre>Model </code>的数据同时帮忙处理 <code v-pre>View</code> 中由于需要展示内容而涉及的业务逻辑。</p>
<p><code v-pre>MVVM</code>采用双向数据绑定，<code v-pre>view</code>中数据变化将自动反映到<code v-pre>viewmodel上</code>，反之，<code v-pre>model</code>中数据变化也将会自动展示在页面上。把<code v-pre>Model</code>和<code v-pre>View</code>关联起来的就是<code v-pre>ViewModel</code>。<code v-pre>ViewModel</code>负责把<code v-pre>Model</code>的数据同步到<code v-pre>View</code>显示出来，还负责把<code v-pre>View</code>的修改同步回<code v-pre>Model</code>。</p>
<h2 id="v-modle" tabindex="-1"><a class="header-anchor" href="#v-modle" aria-hidden="true">#</a> v-modle</h2>
<p><code v-pre>v-model</code>其实是一个<code v-pre>语法糖</code>，他背后的本质上是包含两个操作</p>
<ul>
<li><code v-pre>v-bind</code>绑定一个<code v-pre>value</code>属性</li>
<li><code v-pre>v-on</code>指令给当前元素绑定<code v-pre>input</code>事件</li>
</ul>
<h2 id="制作npm插件" tabindex="-1"><a class="header-anchor" href="#制作npm插件" aria-hidden="true">#</a> 制作npm插件</h2>
<ol>
<li>组件</li>
<li>组件<code v-pre> =&gt;</code> 插件</li>
<li>配置入口文件</li>
<li>测试</li>
<li>打包</li>
<li>上传<code v-pre>npm</code>官网</li>
<li>测试</li>
</ol>
<h2 id="nexttick" tabindex="-1"><a class="header-anchor" href="#nexttick" aria-hidden="true">#</a> nextTick</h2>
<p><code v-pre>dom</code>加载完成，页面渲染之后执行</p>
</div></template>


